<template>
    <div>
        <div class="title">发现品牌</div>
        <div class="img">
            <img src="//gw.alicdn.com/bao/uploaded/TB1PxmipsUrBKNjSZPxXXX00pXa.jpg_790x10000Q75.jpg_.webp" alt="">
            <img src="//gw.alicdn.com/bao/uploaded/TB1d62XppooBKNjSZPhXXc2CXXa.png_790x10000.jpg_.webp" alt="">
            <div>
                <img src="//gw.alicdn.com/bao/uploaded/TB1yuMIpBjTBKNjSZFDXXbVgVXa.jpg_110x10000Q75.jpg_.webp" alt="">
                <p>霸款限时5折起</p>
                <p>汉堡王超级品牌日</p>
            </div>
        </div>
        <div class="brand">
            <div class="brandBox" v-for="item of list" :class="item.id == 4 ? 'active':'' ">
                <img :src="item.img1" class="img1" alt="">
                <div :class="{'change':changes}">
                    <img :src="item.img2" alt="">
                    <p>{{item.text}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        name:"HomeFindbrand",
        props:{
            list:Array
        },
        data(){
            return{
                changes:false
            }
        },
        methods:{
            
            change(){
                var that = this
                setTimeout(function(){
                    that.changes = true
                    that.close()
                },3000)
            },
            close(){
                var that = this
                setTimeout(function(){
                    that.changes = false
                },3000)
            }
        },
        mounted(){
            var that = this
            setInterval(function(){
                that.change()
            },6000)
        }
    }
</script>

<style lang="stylus" scoped>
.title
    width 3.55rem
    height 0.3rem
    margin 0 auto
    margin-top 0.1rem
    font-size: 0.18rem
    color: rgb(51, 51, 51)
    text-align: left
    font-weight: 600;
    line-height 0.3rem
.img
    position relative
    width 3.55rem
    height 1.25rem
    margin 0 auto 
    margin-top 0.1rem
    img 
        position absolute
        top 0
        left 0
        width 100%
        height 100%  
    div
        position absolute
        bottom 0.14rem
        right 0
        width 1.5rem
        height 0.38rem
        img 
            width 0.375rem
            height 0.375rem  
        p
            width 1.125rem
            margin-left 0.4rem    
            font-size: 0.1rem
            color: rgb(255, 255, 255)
            text-align: left
            margin-top: 0.03rem;
.brand
    width 3.55rem
    height 0.9rem
    margin 0 auto  
    .brandBox
        float left
        position relative
        width 23.5%
        height 0.84rem
        margin-right 2%
        text-align center
        overflow hidden
        background-color #eee    
        .img1
            width 0.45rem
            height 0.45rem 
            margin-top 0.1rem 
    div
        position absolute
        width 100%
        height 100%
        transition: all 1000ms ease 0ms
        transform: translateY(0)  
        background-color #ddd    
        img 
            width 0.45rem
            height 0.225rem
            margin-top 0.04rem
            background-color #eee
        p
            width 100%
            position absolute
            bottom 0.15rem
            left 0
            font-size: 0.1rem
            color: rgb(0, 0, 0)
            font-weight: 100
            line-height: 0.24rem
            text-align center
    .change
        transition: all 1000ms ease 0ms
        transform: translateY(-0.55rem)  
    .active
        margin-right 0     
</style>
